<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="js/jquery-easyui/themes/icon.css">
    <link rel="stylesheet" href="js/jquery-easyui/themes/gray/easyui.css">
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/jquery-easyui/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="js/jquery.form.js"></script>
    <script src="js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
    <script src="js/js.cookie.min.js"></script>
    <title>主页</title>
</head>
<style type="text/css">
    #menu .headerLogo {
        height: 60px;
        background-color: #d8ebfb;
        color: #fff;
        width: 200px;
        text-align: center;
        vertical-align: middle;
        border:0px solid red;
        display: table-cell;
        top: 0px;
        left: 0px;
        padding: 0px;
        margin: 0px;
    }


    #menu .menuPanel {
        background-color: #034eb3e0;
        color: #fff;
        width: 200px;
        position:fixed;
        top: 60px;
        left: 0px;
        bottom: 0px;
        overflow: auto;
        overflow-x: hidden ;
    }

    #menu .menuPanel::-webkit-scrollbar {/*滚动条整体样式*/
        width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 4px;
    }
    #menu .menuPanel::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 5px;
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: rgba(0,0,0,0.2);
    }
    #menu .menuPanel::-webkit-scrollbar-track {/*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        border-radius: 0;
        background: rgba(0,0,0,0.1);
    }


    #menu ul {
        padding: 0px;
        padding: 0px;
        list-style: none;
    }

    #menu a {
        height: 8px;
        color: #eaefec;
        text-decoration: none;
        cursor: pointer;
        display: block;
        padding: 15px 20px;
        font-size: 14px;
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: center;  /* 垂直 */
        align-items: center;
        /*border-left: 2px solid #03a545;*/
    }

    #menu a:visited {
        text-decoration: none;
    }

    #menu a:hover {
        text-decoration: none;
        background-color: #2196f357;
    }
    #menu a.active {
        color: #fff;
        border-left: 2px solid #fff;
        background-color: #0e83e1d9;
    }


    #menu a:link {
        text-decoration: none;
    }





    html,body {
        height: 100%;
        padding: 0px;
        margin: 0px;
    }

    body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div {
        margin: 0;
        padding: 0;
    }

    body {
        padding: 0px;
        margin: 0px;
        font-size: 12px;
        color: #333333;
        /* background-color: #e7e8eb; */
        background-color: #fff;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    table {
        border: none;
        empty-cells: show;
        border-collapse: collapse;
        text-overflow: ellipsis;
        word-wrap: break-word;
        word-break: break-all;
    }

    table th {
        font-weight: normal;
        padding: 0px;
        border-collapse: collapse;
        background-color: #f3f3f3;
        text-align: left;
    }

    table td {
        padding: 0px;
        border-collapse: collapse;
        border: 0px solid #cdcdcd;
        line-height: 0px;
        font-size: 0px;
    }

    table td img {
        display: block;
    }

    .header{
        height: 60px;
        border-bottom: 1px #dddddd solid;
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: center;  /* 垂直 */
        align-items: center;
        -webkit-justify-content: center;/* 水平 */
        justify-content: center;
        color: #000000;
    }
    .header .name_div{
        padding-left: 20px;
        letter-spacing: 1px;
        color: #000;
        font-size: 16px;
    }


    .header .menu_div{
        width: 200px;
    }
    .menu_div img{
        float: right;
        margin-right: 25px;
        width: 28px;
        height: 28px;

    }


</style>
<body>
<table style="width:100%;height:100%">
    <tr>
        <td width="200px;" height="60px" rowspan="2" id="menu">
            <!--<iframe name="leftFrame" id="menuFrame" scrolling="no" frameborder="0"  src="menu.html" style="width:100%; height:100%;"></iframe>-->
            <div style="width:100%; height:100%;">
                <div class="headerLogo">
                    <img src="./img/logo.png" style="height: 45px; border: 0px solid; padding-top: 5px; padding-left: 30px;">
                </div>
                <div style="height:60px;"></div>
                <div class="menuPanel">
                    <ul>
                        <li>
                            <a href="#" class="module" data-url="/information" >发布资讯</a>
                            <a href="#" class="module" data-url="/informationManager" >资讯管理</a>
                            <a href="#" class="module" data-url="/addProductManager" >发布商品</a>
                            <a href="#" class="module" data-url="/productManager" >商品管理</a>
                            <a href="#" class="module" data-url="/cases" >案例增加</a>
                            <a href="#" class="module" data-url="/casesManager" >案例管理</a>
                            <a href="#" class="module" data-url="/customerMessage" >用户留言</a>
                            <a href="#" class="module" data-url="/firstPage" >系统配置</a>
                        </li>
                    </ul>
                </div>
            </div>
        </td>
        <td height="60px">
            <div class="header">
                <div class="name_div" id="headerTitle"></div>
                <div style="flex: 1;
    webkit: 1;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;"></div>
                <div class="menu_div">

                </div>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <iframe name="centerFrame" id="contentFrame" frameborder="0"  src="" style="width:100%; height:100%;overflow: scroll;"></iframe>
        </td>
    </tr>
</table>
</body>
<script type="text/javascript">

    function getCookie(name){
        var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
        if(arr=document.cookie.match(reg))
            return unescape(arr[2]);
        else
            return null;
    }

    $(function() {
        $("#headerTitle").html("<span>欢迎您："+getCookie("login")+"</span>");
            $("a").click(function() {
                $("a").removeClass("active");
                $(this).addClass("active");
            });

            $("a.module").click(function () {

                var url = $(this).attr("data-url");

                if (typeof url == 'undefined' || url == '') {
                    alert('模块不存在');
                } else {
                    console.log(url);
                    $("#contentFrame").attr("src",url);
                }


            });
    });


</script>

</html>